Skip to content

fix/playbooks on header #2779

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
moshloop merged 3 commits into from
Jan 14, 2026
Merged

fix/playbooks on header #2779

moshloop merged 3 commits into from
Jan 14, 2026

Conversation

@adityathebe
Copy link
Member

@adityathebe adityathebe commented Dec 10, 2025 •
edited by coderabbitai bot
Loading

resolves: #2773

image image

Summary by CodeRabbit

  • New Features

    • Playbooks button now appears contextually in configuration details view when applicable

  • Improvements

    • Enhanced styling customization for playbooks menu with improved visual control options
    • Refined layout behavior for better content display and scrolling

  • Bug Fixes

    • Fixed display of missing icons with appropriate fallback defaults

✏️ Tip: You can customize this high-level summary in your review settings.

@vercel
Copy link

vercel bot commented Dec 10, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
aws-preview Ready Ready Preview Jan 14, 2026 7:24am
flanksource-ui Ready Ready Preview Jan 14, 2026 7:24am

@coderabbitai
Copy link

coderabbitai bot commented Dec 10, 2025 •
edited
Loading

Walkthrough

This PR relocates the playbooks dropdown menu from ConfigActionBar to ConfigDetailsTabs and enhances PlaybooksDropdownMenu with customizable styling props (containerClassName, highlight) to support flexible layout positioning and improved visibility when the right panel state changes.

Changes

Cohort / File(s) Summary
Playbooks UI Relocation
src/components/Configs/ConfigDetailsTabs.tsx, src/components/Configs/Sidebar/ConfigActionBar.tsx		 Moved PlaybooksDropdownMenu rendering from ConfigActionBar to ConfigDetailsTabs; introduced layoutExtra prop to combine playbooks button with existing extra content; adjusted contentClass styling to "p-0 h-full overflow-y-hidden"
PlaybooksDropdownMenu Enhancement
src/components/Playbooks/Runs/Submit/PlaybooksDropdownMenu.tsx		 Added containerClassName and highlight props; replaced hardcoded className with clsx-based buttonClassName; applied dynamic styling to ChevronDownIcon based on highlight prop
Icon Fallback
src/components/Playbooks/Settings/PlaybookSpecIcon.tsx		 Added fallback to "playbook" icon when spec?.icon is undefined
🚥 Pre-merge checks | ✅ 4 | ❌ 1
❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'fix/playbooks on header' directly references moving the playbooks button to the header, which aligns with the main objective of fixing the hidden playbook button issue.
Linked Issues check ✅ Passed The PR successfully addresses issue #2773 by moving the playbooks button from the config panel sidebar to the header, ensuring it remains visible even when the right panel is collapsed.
Out of Scope Changes check ✅ Passed All changes are directly related to the playbooks button placement and visibility. The modifications to PlaybooksDropdownMenu styling props, PlaybookSpecIcon fallback, and ConfigDetailsTabs layout are all necessary to support the primary objective.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch fix/playbooks-on-header
🧹 Recent nitpick comments
src/components/Playbooks/Runs/Submit/PlaybooksDropdownMenu.tsx (1)

55-61: Minor: Duplicate px-2 py-1 classes.

When highlight is false, the btn-white px-2 py-1 at line 59 duplicates the px-2 py-1 already included in the base styles at line 56. While CSS handles duplicates gracefully, this is slightly redundant.

♻️ Suggested fix 
   const buttonClassName = clsx(
-    "inline-flex items-center rounded-md px-2 py-1 text-sm font-medium shadow-sm focus:outline-none transition-colors",
+    "inline-flex items-center rounded-md text-sm font-medium shadow-sm focus:outline-none transition-colors",
     highlight
-      ? "border border-blue-200 bg-blue-50 text-blue-800 hover:bg-blue-100 focus:ring-2 focus:ring-blue-100"
+      ? "px-2 py-1 border border-blue-200 bg-blue-50 text-blue-800 hover:bg-blue-100 focus:ring-2 focus:ring-blue-100"
       : "btn-white px-2 py-1",
     className
   );
📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c0ae9d7 and 913e8e5.

📒 Files selected for processing (4)
  • src/components/Configs/ConfigDetailsTabs.tsx
  • src/components/Configs/Sidebar/ConfigActionBar.tsx
  • src/components/Playbooks/Runs/Submit/PlaybooksDropdownMenu.tsx
  • src/components/Playbooks/Settings/PlaybookSpecIcon.tsx
💤 Files with no reviewable changes (1)
  • src/components/Configs/Sidebar/ConfigActionBar.tsx
🧰 Additional context used
🧬 Code graph analysis (2)
src/components/Configs/ConfigDetailsTabs.tsx (1)
src/components/Playbooks/Runs/Submit/PlaybooksDropdownMenu.tsx (1)
  • PlaybooksDropdownMenu (27-118)
src/components/Playbooks/Runs/Submit/PlaybooksDropdownMenu.tsx (1)
src/ui/Menu/index.tsx (1)
  • Menu (67-72)
🔇 Additional comments (5)
src/components/Playbooks/Settings/PlaybookSpecIcon.tsx (1)

23-23: LGTM!

Good defensive change—providing a fallback "playbook" icon ensures consistent rendering when spec.icon is undefined or empty.

src/components/Configs/ConfigDetailsTabs.tsx (2)

54-64: LGTM!

Clean implementation that addresses the PR objective. The playbooks button is now rendered in the header (via layoutExtra passed to SearchLayout.extra), ensuring it remains visible when the right panel is collapsed. The conditional wrapper only renders when there's content to display.

88-88: Verify this layout change is intentional.

The contentClass change from "p-0 flex flex-1" to "p-0 h-full overflow-y-hidden" appears unrelated to moving the playbooks button. Please confirm this adjustment is needed for the new header layout and doesn't cause unintended layout regressions.

src/components/Playbooks/Runs/Submit/PlaybooksDropdownMenu.tsx (2)

23-33: LGTM!

The new props (containerClassName, highlight) are well-designed with sensible defaults that maintain backward compatibility. The highlight feature provides good flexibility for future use cases or other contexts where visual emphasis is needed.

63-77: Clean implementation of the dropdown trigger.

The menu button styling with conditional highlight and icon placement is well-structured. Using clsx for dynamic class composition is the right approach.

✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@adityathebe adityathebe requested a review from moshloop December 10, 2025 07:02
@netlify
Copy link

netlify bot commented Dec 19, 2025 •
edited
Loading

❌ Deploy Preview for flanksource-demo-stable failed. Why did it fail? →

Name Link
🔨 Latest commit c1c2be0
🔍 Latest deploy log https://app.netlify.com/projects/flanksource-demo-stable/deploys/69391a985a809b0008a5e702

@netlify
Copy link

netlify bot commented Dec 19, 2025 •
edited
Loading

❌ Deploy Preview for clerk-saas-ui failed. Why did it fail? →

Name Link
🔨 Latest commit c1c2be0
🔍 Latest deploy log https://app.netlify.com/projects/clerk-saas-ui/deploys/69391a985a809b0008a5e706

@adityathebe adityathebe force-pushed the fix/playbooks-on-header branch from c1c2be0 to 4f33479 Compare January 13, 2026 08:03
@adityathebe adityathebe force-pushed the fix/playbooks-on-header branch from 4f33479 to 913e8e5 Compare January 14, 2026 07:19
@moshloop moshloop merged commit 47200c3 into main Jan 14, 2026
13 of 15 checks passed
@moshloop moshloop deleted the fix/playbooks-on-header branch January 14, 2026 09:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@moshloop moshloop Awaiting requested review from moshloop

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Playbook button on config page gets hidden when the right panel is collapsed

3 participants

@adityathebe @moshloop